<html>
   <head>
      <script src="../../../Grid/GridE.js"> </script>
      <title>2D Pivot table created dynamically on HTML page | TreeGrid</title>
      <meta name="description" content="Live sample creates two dimensional Pivot table from source HTML table. Users can dynamically choose pivot columns for the pivot table by mouse dragging" />
   </head>
   <body class="Example">
      <style>
         /* Examples shared styles */
         .Example h1,.Example h2,.Example ul,.Example .Desc,.Example .Path,.Example .Xml { max-height:999999px; }
         .Example h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
         .Example h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
         .Example h3,.Example h4 { display:inline-block; font:bold 15px/17px Arial; padding:0px 5px 0px 5px; border-radius:2px; margin:2px; color:#333; }
         .Example h3 { background:#EE9; border:1px solid #DD8; }
         .Example h4 { background:#BDE; border:1px solid #ACD; }
         .Example a { text-decoration:underline; }      
         .Example li { padding-bottom:8px; }
         .Example ul { margin:6px 0px 0px 0px; font:13px/16px Arial; }    
         .Example > ul { margin-left:0px; padding-left:15px; clear:both; }
         .Example ul b { color:#0585B9; }
         .Example .Desc { margin:0px 5px 10px 5px; padding:10px; border:1px solid #dfdfdf; font:14px/17px Arial; }
         .Example .Desc b { color:#0585B9; }
         .Example .Path { font:normal 12px Arial; color:#0585B9; }
         .Example .Path b { color:#D73938; }
         .Example .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
         .Example .Path i { color:black; font-style:normal; font-weight:bold; }
         .Example .Xml { margin-bottom:6px; font:11px/14px Arial; color:#757575; }
         .Example .Border { margin:0px 5px 5px 5px; }
         .Example .Main { }
         @media (max-width:1334px){ .Example .Tab * { font-size:9px; } } /* On smaller displays reduces font size for all top tabs */
         @media (max-height:800px) { 
            .Example .Desc { font-size:13px; line-height:15px; margin:0px 5px 5px 5px; padding:3px 5px; } 
            .Example .Border { margin-bottom:0px; }
            .Example h1 { font:20px Arial; padding:0px; }
            .Example h2 { font:12px Arial; }
            }
      </style>
      <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Examples\/|\/ExamplesGantt\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
      <h1>Pivot table</h1>
      <h2>Two dimensional grouping of plain data into pivot table</h2>
      <div class="Desc">
         <div>Example creates two dimensional pivot table from plain data. Click to "Show master" button to see the source data.</div>
         <div>In top row there are columns available as pivot sources. Drag them to the second row to set up the pivot columns, rows and data and click to <b>Create pivot</b> button.</div>
         <div>In the third row there are buttons for creating, clearing and switching the pivot table. You can also choose some from predefined pivot settings from list to set up the pivot table.</div>
         <div>You can modify the pivot or source table (edit cells, add, delete and move rows) and the second grid will be automatically updated accordingly. In real application the changes can be also saved to original database.</div>
         <div>Colors in the pivot table: White background with blue font are the original data, they can be edited if they represent only one source row (not summary). Red background are immediate summaries, the others are summary summaries.  </div>
         <div>Too large tables, with too many columns, don't permit expanding all columns, but only one column per higher level. To speed up the grid.</div>
      </div>
      <div class="Border">
         <div class="Main" style='width:100%; height:350px; display:none; padding-bottom:5px;'>
            <bdo debug='check' Layout_Url='CarsDef.js' Data_Url='CarsData.js'></bdo>
         </div>

         <div class="Main" style='width:100%; height:520px;'>
            <bdo debug='check' Layout_Url='PivotDef.js'></bdo>
         </div>
      </div>
      <script>
      // Used to hide control toolbar in pivot grid when master grid is shown too
      Grids.OnMediaUse = function(G,M,use){ if(M.Attrs&&M.Attrs.Name=="HideToolbars") return Grids.Cars&&Grids.Cars.MainTag.style.display!="none"; }
      </script>

      <!-- Google Analytics code run once for trial -->
      <script>
         var TGTrial = document.cookie.match(/TGTrialGrid\s*=\s*(\d+)/), TGIndex = 4;
         if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
            var n = "RunTrialHtmlPivotTable", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialGrid="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
            var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
            var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
                 +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
            var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
            },100);
      </script>
   </body>
</html>